<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }

        ul li {
            width: 23%;
            margin: 1%;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }

        img {
            width: 100%;
            height: 200px;
            background-color: #f00;
        }
    </style>

</head>

<body>

    <ul id="list">
        <!-- <li>
                <img src="" alt="">
                <h3>标题</h3>
                <p>详细描述</p>
                <strong>价格</strong>
        </li> -->
    </ul>

    <script src="../js/data.js"></script>

    <script>

        // 1 页面显示一组数据   12

        // 2 滚动 
        //    判断到达底部  --- 快要到达底部  开始请求下一波数据

        // 3 数据都拿到了  


        // 确认每次显示多少条数据    20

        // 滚动的时候  
        //    滚动一次：20-40    滚动2次：40-60   滚动3次：60-80   ...     
        //    分析 (count) * 20  (count+1) * 20

        //    数据加载完毕   总页数   data.length / 20   

        lazyLoad(data , 16);


        function lazyLoad(data , pageLen) {
            // let pageLen = 20;
            let page = 1;
            let pageAll = Math.ceil(data.length / pageLen);

            let oUl = document.querySelector('ul');


            // 渲染页面  0-20
            render()



            // 滚动事件
            window.onscroll = function () {
                if (page >= pageAll) {
                    return
                }
                // 判断快要到达底部
                if (document.documentElement.scrollHeight - document.documentElement.clientHeight - document.documentElement.scrollTop <= 50) {
                    console.log('到底了');
                    page++;
                    console.log(page);
                    render();


                    // 第一次   0-20       (page-1) * 20 ,page * 20
                    // 第二次   20-40      (page-1) * 20 ,page * 20
                    // 第三次   40-60      (page-1) * 20 ,page * 20
                }
            }





            function render() {
                // 需要在原来的基础上再加20条数据
                let html = oUl.innerHTML;
                console.log(data);
                // 0-20    20-40   40-60   ...  100-120->总共只有108  100-108
                let end = page * pageLen;
                end = end < data.length ? end : data.length;
                for (let i = (page - 1) * pageLen; i < end; i++) {
                    // 解构
                    const { goodsSrc, goodsTitle, goodsDes, goodsPrice } = data[i];
                    html += `<li>
                        <img src="${goodsSrc}" alt="">
                        <h3>${goodsTitle}</h3>
                        <p>${goodsDes}</p>
                        <strong>${goodsPrice}</strong>
                    </li>`
                }

                // 
                oUl.innerHTML = html;
            }
        }


    </script>

</body>

</html>